import '../scss/style.scss'
import './style.scss'
import Swiper from 'swiper'
import 'swiper/css'
import { $, $all } from '../utils/util'
import { getBanner, getPlayList, getPersonalized } from '../services'

// 轮播图
const initBanner = async () => {
  const res = await getBanner()
  $('.swiper-wrapper').innerHTML = res.data.banners.map(item => {
    return `<div class="swiper-slide"><img src="${item.imageUrl}" /></div>`
  }).join('')
  const swiper = new Swiper('.swiper')
}

// 热歌
const initHotList = async () => {
  const res = await getPlayList('3778678')
  console.log(res.data)
}

// 歌单
const getPersonalizedData = async () => {
  const res = await getPersonalized()
  $('.playList').innerHTML = res.data.result.map(item => {
    return `
      <div class="playListItem" data-id="${item.id}">
        <img src="${item.picUrl}" />
        <p>${item.name}</p>
      </div>
    `
  }).join('')

  $('.playList').addEventListener('click', e => {
    const id = e.target.getAttribute('data-id')
    console.log(id)
    location.href = `./detail.html?id=${id}&a=100&b=200&a=aaa`
  })
}
$('.search').addEventListener('click',e=>{
  location.href = `./search.html`
})



initBanner()
initHotList()
getPersonalizedData()



// tab切换
$all('nav span').forEach((span, index) => {
  span.addEventListener('click', () => {
    $('nav .active').classList.remove('active')
    span.classList.add('active')
    $('.show')?.classList.remove('show')
    $all('.page')[index]?.classList.add('show')
  })
})
